<!-- 灯杆 -->
<template>
  <div class="content_body_left">
    <ul class="content_body_list">
      <li class="item">
        <div class="label">名称：</div>
        <div class="text">{{ prop.info && prop.info.mc }}</div>
      </li>
      <li class="item">
        <div class="label">杆号：</div>
        <div class="text">{{ prop.info && prop.info.gh }}</div>
      </li>
      <li class="item">
        <div class="label">杆型：</div>
        <div class="text">{{ prop.info && prop.info.gx }}</div>
      </li>
      <li class="item">
        <div class="label">所属工程：</div>
        <div class="text">{{ prop.info && prop.info.ssgcmc }}</div>
      </li>
      <li class="item">
        <div class="label">厂家：</div>
        <div class="text">{{ prop.info && prop.info.sccj }}</div>
      </li>
      <li class="item">
        <div class="label">所属工区：</div>
        <div class="text">{{ prop.info && prop.info.ssgqmc }}</div>
      </li>
      <li class="item">
        <div class="label">地址：</div>
        <div class="text">{{ prop.info && prop.info.dz }}</div>
      </li>
      <li class="item">
        <div class="label">更新时间：</div>
        <div class="text">{{ prop.info && time(prop.info.modifyAt) }}</div>
      </li>
      <li class="item">
        <div class="label">附件：</div>
        <div class="text">{{ prop.info && prop.info.tplj }}</div>
      </li>
    </ul>
    <div>
      <ColumnLabel label="灯杆挂载设备"></ColumnLabel>
    </div>
    <ul class="device_list">
      <li class="item" v-for="(item, index) in list" :key="index">
        <img v-if="item.model === 'LED'" :src="LED" alt="" srcset="">
        <img v-if="item.model === '钠灯'" :src="ND" alt="" srcset="">
        <img v-if="item.model === '摄像头'" :src="SXT" alt="" srcset="">
        <img v-if="item.model.indexOf('单灯控制器') > -1" :src="DDKZQ" alt="" srcset="">
        <img v-if="item.model.indexOf('电缆井') > -1" :src="DLJ" alt="" srcset="">
        <img v-if="item.model.indexOf('光照') > -1" :src="GZ" alt="" srcset="">
        <img v-if="item.model.indexOf('基站') > -1" :src="JZ" alt="" srcset="">
        {{ item.mc }}({{ item.model }})
      </li>
    </ul>
  </div>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { dayjs } from 'element-plus'
import { lampPostGetDeviceByIdGet } from '@/api/usemap'
import LED from '@/assets/images/灯LED@2x.png'
import SXT from '@/assets/images/摄像头@2x.png'
import DDKZQ from '@/assets/images/单灯控制器_正常@2x.png'
import DLJ from '@/assets/images/电缆井_圆井@2x.png'
import GZ from '@/assets/images/光照@2x.png'
import JZ from '@/assets/images/基站@2x.png'
import ND from '@/assets/images/灯其他@2x.png'
const prop = defineProps(['info'])
//  时间转换
const time = (value: number) => {
  if (!value) return ''
  return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
}
//  灯杆挂载设备
let list = ref<any[]>([])
const init = async () => {
  const { data } = await lampPostGetDeviceByIdGet(prop.info.id)
  list.value = data
}
onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
.device_list {
  padding: 10px 30px;

  .item {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 14px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 10px;

    img {
      width: 20px;
      height: 20px;
    }
  }
}
</style>